<template>
	<view>
		<view>
			<view style="width:60%;margin: 116rpx auto 20rpx auto;">
				<fui-segmented-control color="#FFDD00" :current="tabIndex" activeColor="#000" :values="values"
					@click="changePages"></fui-segmented-control>
			</view>
			<fui-tabs :tabs="pageTabs" :current="twoTabIndex" :short="false" size="24" selectedSize="26" isSlider scroll
				alignLeft selectedColor="#000" sliderBackground="#FFDD00" @change="tabChange"></fui-tabs>
		</view>

		<view v-for="(page, index) in values.length" :key="index">
			<view class="padding-left-right-30" v-if="tabIndex == index">
				<view class="" v-for="(item, idx) in pageTabs.length" :key="idx">
					<view class="" v-if="twoTabIndex == idx">
						<view v-for="(item,key) in RankingList" :key="key" class="rankingList"
							@click="onNav(`/artistesPages/pages/artister?artisterID=${item.UserID}`)">
							<view class="rankIndex">No.{{key+1}}</view>
							<view class="rankHead">
								<image :src="item.WxHeadPic" style="width: 50rpx;height: 50rpx;border-radius: 50rpx;">
								</image>
							</view>
							<view class="rankName">{{item.NickName}}</view>
							<view class="rankCount">
								<view>
									累计
									<text v-if="twoTabIndex == 0">收到礼物值</text>
									<text v-if="twoTabIndex == 1">送出礼物值</text>
									<text v-if="twoTabIndex == 2">发布通告</text>
								</view>
								<view class="Count">{{Math.floor(item.numerical)}}</view>
							</view>
						</view>

					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			// 当前 tab的长度
			page: {
				type: [String, Number],
				default: ''
			},
		},
		data() {
			return {
				city: 1,
				tabIndex: 0,
				tabIndexParams: 1,
				twoTabIndex: 0,
				values: [
					'全国', '同城'
				],
				pageTabs: [{
						index: 0,
						name: '魅力榜'
					},
					{
						index: 1,
						name: '会员榜'
					},
					{
						index: 2,
						name: '通告榜'
					}
				],
				RankingList: [],
				showCharmList: true,
			};
		},
		mounted() {
			// console.log('page', this.page)
			if (this.page == 2) this.getRankingList()
		},
		methods: {
			onNav(url) {
				uni.navigateTo({
					url
				})
			},
			getRankingList() {
				this.$httpost('/artister/RedPersonList', {
					city: this.city,
					tabIndex: this.tabIndexParams
				}).then(res => {
					if (res.code == 200) {
						this.RankingList = res.data.list
					}
					// console.log('排行列表', res)
				})
			},

			changePages(e) {
				this.tabIndex = e.index;
				if (e.index == 0) {
					this.city = 1;
				} else {
					if (uni.getStorageSync('MyCity')) {
						this.city = uni.getStorageSync('MyCity').subText
					} else {
						uni.showModal({
							title: '您当前没有定位城市！',
							content: '定位城市',
							success: res => {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/index/selectCity'
									})
								}
							}
						})
					}
				}
				this.getRankingList()
			},
			tabChange(e) {
				// console.log(e)
				this.twoTabIndex = e.index;
				this.tabIndexParams = e.index + 1
				this.getRankingList()
			}
		}
	}
</script>

<style lang="scss">
	.rankingList {
		height: 50rpx;
		padding: 30rpx 10rpx;
		line-height: 50rpx;
		border-bottom: 1rpx solid #CCC;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;


	}

	.rankIndex {
		width: 100rpx;
		font-size: 36rpx;
		font-weight: bold
	}

	.rankHead {
		width: 50rpx;
		height: 50rpx;
		// background-color: #CCC;
		text-align: center;
		border-radius: 50rpx;
		overflow: hidden;
	}

	.rankName {
		margin-left: 20rpx;
		font-size: 30rpx;
		color: #999;
		width: 200rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.rankCount {
		float: left;
		margin-left: 20rpx;
		width: 350rpx;
		// display: flex;
		// flex-direction: row;
		// justify-content: center;
		// align-items: center;
	}

	.rankCount view {
		float: left;
	}

	.rankCount .Count {
		margin-left: 5rpx;
		color: #FF6600
	}
</style>